<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <i class="el-icon-edit"></i>&nbsp;&nbsp;
        <input type="text" v-model="type"> <button class="ant-btn ant-btn-red" @click='commit'>增加</button>
       
      </div>
      <div class="text item">
      <el-table
    :data="type_list"
    border
    style="width:500px">
    <el-table-column
      fixed
      prop="id"
      label="id"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="分类名称"
      width="80">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button type="text" size="small">编辑</el-button>
        <el-button type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: "projectinfo",
  data() {
    return {
      type:'',
      type_list:[]
    };
  },methods:{
     commit:function(){
           this.axios.get('http://127.0.0.1:8000/class/class_type/',{params:{type:this.type}}).then((result) =>{
             
             alert(result.data.message)
             this.get_type()

            

      });
  },
  get_type:function(){
         this.axios.get('http://127.0.0.1:8000/class/ctype_show/').then((result) =>{
            console.log(result.data)
            this.type_list=result.data

      });


  },
  delete:function(id){
    console.log(id)

  }
},
mounted:function(){
  this.get_type()


}
}
</script>
<style scoped lang="scss">
ol {
  margin-top: 0;
  li {
    line-height: 30px;
  }
}
input{
        border: 1px solid #ccc;
        padding: 7px 0px;
        border-radius: 3px;
         padding-left:5px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
         box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
         -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
         transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
        }
input:focus{
        border-color: #66afe9;
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
         box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
.ant-btn {
    line-height: 1.499;
    position: relative;
    display: inline-block;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    background-image: none;
    border: 1px solid transparent;
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.015);
    box-shadow: 0 2px 0 rgba(0,0,0,0.015);
    cursor: pointer;
    -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 4px;
    color: rgba(0,0,0,0.65);
    background-color: #fff;
    border-color: #d9d9d9;
}
.ant-btn-red {
    color: #fff;
    background-color: #FF5A44;
    border-color: #FF5A44;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.12);
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.045);
    box-shadow: 0 2px 0 rgba(0,0,0,0.045);
}
</style>
